<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <br />
    <br />
    <el-table style="width: 100%" :data="yonghu">
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.img"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="yonghuming" label="用户名" align="center">
      </el-table-column>
      <el-table-column prop="xingbie" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="shengri" label="生日" align="center">
      </el-table-column>
      <el-table-column prop="shoujihao" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="youxiang" label="邮箱" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- @click="dialogVisible = true "-->
          <el-button type="text" @click="selectById(scope.row)"
            >查看详情</el-button
          >
          <el-dialog
            title="用户信息"
            :visible.sync="dialogFormVisible"
            width="30%"
          >
            <ul class="list" :data="yhxx">
              <li style="text-align: center">
                头像:&nbsp;&nbsp;
                <el-avatar :src="yhxx.img"></el-avatar>
              </li>
              <li>用户名:&nbsp;&nbsp;{{ yhxx.yonghuming }}</li>
              <li>性别:&nbsp;&nbsp;{{ yhxx.xingbie }}</li>
              <li>生日:&nbsp;&nbsp;{{ yhxx.shengri }}</li>
              <li>手机号:&nbsp;&nbsp;{{ yhxx.shoujihao }}</li>
              <li>邮箱:&nbsp;&nbsp;{{ yhxx.youxiang }}</li>
              <li>收件人:&nbsp;&nbsp;{{ yhxx.shoujianren }}</li>
              <li>收货地址:&nbsp;&nbsp;{{ yhxx.shouhuodizhi }}</li>
              <li>收货手机号:&nbsp;&nbsp;{{ yhxx.shouhuoshoujihao }}</li>
            </ul>
            <span slot="footer" class="dialog-footer">
              <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
              <el-button type="primary" @click="dialogFormVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination layout="prev, pager, next" :total="50" align="center">
    </el-pagination> -->
  </div>
</template>

<script>
import httpApi from "@/myaxios/index";
export default {
  data() {
    return {
      // 保存用户信息
      yonghu: [],
      // dialogVisible: false,
      // 隐藏 弹窗信息
      dialogFormVisible: false,
      // 保存当前行 信息
      yhxx: {},
      // 保存当前行 id
      a: "",
    };
  },
  methods: {
    selectById(info) {
      console.log(info);
      // 显示 弹窗信息
      this.dialogFormVisible = true;
      // 打印当前 id
      console.log(info.id);
      this.a = info.id -1;
      // id请求当前行 信息
      httpApi.yonghuApi.queryById({ id: info.id }).then((res) => {
        // 当前行 信息
        console.log(res.data[this.a])
        this.yhxx = res.data[this.a];
      });
    },
    // 初始化信息
    init() {
      httpApi.yonghuApi.queryAll().then((res) => {
        console.log(res.data);
        this.yonghu = res.data;
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.list {
  height: 400px !important;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  &:nth-child(1) {
    height: 150px;
    text-align: center;
  }
}
</style>
